<template>
  <div>
    <Alert
      message="使用 useModal 进行弹窗操作，默认可以拖动，可以通过 draggable
    参数进行控制是否可以拖动/全屏，并演示了在Modal内动态加载内容并自动调整高度"
      show-icon
    />
    <Alert message="内外同时同时显示隐藏" show-icon />


    <BasicModal
      @register="lightModalRegister"
      class="basicModalLight"
      ref="modalRef"
      @on-ok="lightOkModal"
    >
      <template #default>
        <p class="text-gray-500" style="padding-left: 35px">一些对话框内容</p>
      </template>
    </BasicModal>

    <a-button type="primary" @click="showModal">打开Modal嵌套Form例子</a-button>


  </div>
</template>
<script lang="ts" setup>
  import { Alert, Space } from 'ant-design-vue';
  import { BasicModal, useModal } from '@/components/Modal';

  const lightOkModal = ()=> {

  }

   const [
    lightModalRegister,
    {
      openModal: lightOpenModal,
      closeModal: lightCloseModal,
      setSubLoading: lightSetSubLoading,
    },
  ] = useModal({
    title: '确认对话框',
    showIcon: true,
    type: 'warning',
    closable: true,
    maskClosable: true,
  });

  const showModal = ()=> {
    lightOpenModal();
  }
</script>
